<template>
    <div>
        <el-container class="pannel">
            <el-aside id="loginBar" width="440px" style="overflow: hidden;">
                <div id="loginText">
                    <!--账号密码错误提示-->
                    <div style="margin-left: 100px; margin-top: 80px; position: absolute; height: 200px; width: 400px">
                        <el-popover
                            placement="right"
                            width="200"
                            trigger="manual"
                            :value="isLoginFail"
                            visible-arrow="true"
                            offset="100px 100px">
                            <p style="color: rgb(209, 0, 228); font-size: 15px;">你的登录信息匹配不上我们系统中的账号。</p> 
                        </el-popover>
                    </div>

                    <!--拳头LOGO-->
                    <div id="riotLogo"></div>
                            
                    <b>登录</b>
                </div>
    
                <!--用户名 密码 输入框-->
                <div style="width: 70%; margin-left: auto; margin-right: auto;" @keyup.enter="login">
                    <el-form class="inputBar" ref="form" :model="input">
                        <el-form-item>
                            <el-input placeholder="用户名" v-model="input.userId"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input type="password" placeholder="密码" v-model="input.password" show-password></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                        
                <!--第三方账号登录-->
                <el-row>
                    <el-button size="medium" type="primary" style="padding: 9px 12px; background-color: rgb(48, 120, 255); border: 0;"><b>FaceBook</b></el-button>
                    <el-button size="medium" style="padding: 9px 23px;"><b>Google</b></el-button>
                    <el-button size="medium" type="info" style="padding: 9px 27px; background-color: black; border: 0;"><b>Apple</b></el-button>
                </el-row>
    
                <!--保持登录选项-->
                <el-checkbox id="checkBox"><b>保持登陆状态</b></el-checkbox>
                        
                <!--登录按钮-->
                <div style="margin-top: 200px;">
                    <el-button @click.stop="login" icon="el-icon-right" style=" padding: 20px 20px; font-size: 40px;" circle></el-button>
                </div>
                        
                <!--账号注册与找回-->
                <el-button type="text" style=" margin-top: 20px; color: rgba(167, 167, 167, 0.671);"><b>无法登录？</b></el-button>
                <el-button type="text" style=" margin-top: 20px; color: rgba(167, 167, 167, 0.671);"><b>创建账号</b></el-button>
    
                <!--版本号-->
                <el-button type="text" style="margin-left: 300px; margin-top: 0px; color: rgba(167, 167, 167, 0.671);"><b>{{version}}</b></el-button>
    
            </el-aside>
    
            <!--右侧图片 视频-->
            <el-main id="loginImage">
                <video id="loginVideo" src="../assets/Iamges/login_page.mp4" autoplay loop preload muted></video>
            </el-main>     
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'LoginWin',
    props:['version', 'userInfo', 'loginSuccessful'],
    data(){
        return{
            //输入的信息
            input:{
                userId: "",     //用户名 
                password: "",   //密码
            },
            
            isLoginFail: false,     //登录失败提示的显示状态(true为显示,false为隐藏)
        }
    },
    methods:{
        //Login
        login(){
            //遍历userInfo寻找用户名密码都对得上的用户
            for(let i = 0;i < this.userInfo.length;i++){
                if(this.userInfo[i].userId == this.input.userId && this.userInfo[i].password == this.input.password){
                    //将该用户信息通过父组件prop传入的函数loginSuccessful传给父组件
                    this.loginSuccessful(this.userInfo[i])
                    return;
                }
            }

            //账号密码错误 登陆失败
            this.input.password = "";   //清空密码输入框
            this.input.userId = "";     //清空账号输入框
            this.isLoginFail = true;    //显示登陆失败提示
        },

    }
}
</script>

<style scoped>

    #loginBar{
        background-color: rgb(248, 248, 248);
        text-align: center;
    }

    #loginImage{
        background: url(../assets/Iamges/login_page.png);
        background-size: cover;
        padding: 0;
        overflow: hidden;
    }

    #riotLogo{
        margin-bottom: 80px;
        margin-left: 30%;
        width: 150px;
        height: 50px;
        background: url(../assets/Iamges/RiotLogo.png);
        background-size:cover;
    }

    #loginVideo{
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        object-fit: cover;
        padding: 0;    
    }

    /* 保持登录选项复选框样式 */
    #checkBox{
        top: 15px;
        left: -98px;
    }

    #loginText{
        text-align: center;
        font-size: 25px;
        margin-top: 100px;
        margin-bottom: 10px;
        user-select: none;
    }

    .inputBar{
        margin-top: 25px;
        size: 100px;
    }
</style>